/* General Body Styles (ensure margins are reset for full-width content) */
body {
    font-family: 'Arial', sans-serif;
    margin: 0;
    background-color: #f8f9fa; /* Light background for contrast */
    color: #343a40;
}

/* Product Image Sizing (important for consistency) */
.product-img {
    width: 100%; /* Make image fill its container */
    height: 300px; /* Fixed height for all images to ensure uniform card size */
    object-fit: contain; /* Scales the image down to fit the container without cropping, maintaining aspect ratio */
    padding: 15px; /* Add some padding around the image inside the card */
    background-color: #fff; /* White background for the image area */
    border-bottom: 1px solid #f0f0f0; /* Subtle separator */
}

/* Card Body Adjustments */
.card-body {
    padding: 1rem; /* Default Bootstrap padding is usually fine, but you can adjust */
}

.card-title {
    font-size: 1.25rem; /* Bootstrap default H5 size */
    margin-bottom: 0.5rem;
    color: #343a40;
}

.card-text {
    font-size: 1.1rem;
    margin-bottom: 1rem;
}

/* Buttons within cards */
.add-to-cart {
    width: 80%; /* Make button fill most of the width */
    margin-left: auto; /* Center button */
    margin-right: auto;
    display: block; /* Ensure it behaves as a block element for centering */
}

/* Section Headings */
h1, h2 {
    font-weight: 700;
    color: #2c3e50; /* Darker heading color */
}

/* Horizontal Rule for separation */
.section-divider {
    border: 0;
    height: 1px;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0));
    margin: 3rem 0; /* Add vertical space */
}

/* Ensure the navbar (if custom) has consistent styling with Bootstrap */
.navbar-brand {
    font-weight: bold;
}
.navbar-nav .nav-link.active {
    color: #0d6efd !important; /* Bootstrap primary blue */
    font-weight: bold;
}